import React, { FC } from "react";
import {
  QuestionCheckboxPropsType,
  QuestionCheckboxDefaultProps,
  OptionType,
} from "./interface";
import { Typography, Space, Checkbox } from "antd";
const { Paragraph } = Typography;
const Component: FC<QuestionCheckboxPropsType> = (
  props: QuestionCheckboxPropsType
) => {
  const {
    title,
    isVertical,
    options = [],
  } = { ...QuestionCheckboxDefaultProps, ...props };
  return (
    <div>
      <Paragraph strong>{title}</Paragraph>
      <Space direction={isVertical ? "vertical" : "horizontal"}>
        {options.map((opt: OptionType) => {
          const { value, label, checked } = opt;
          return (
            <Checkbox key={value} value={value} checked={checked}>
              {label}
            </Checkbox>
          );
        })}
      </Space>
    </div>
  );
};

export default Component;
